- 综合排序
- 最热优先
- 最新优先
- 来自专栏生如夏花绚烂
Web Workers
引入 H5规范提供了js分线程的实现，取名为Web Workers他是HTML5提供的一个JavaScript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面 但是子线程完全受主线程控制 上面代码当按钮被点击时根据用户输入的值进行斐波拉契数列的计算 当这个值较大时，由于递归导致页面要很长时间才能响应，在等待响应的过程中由于js的单线程机制导致我们不能进行任何操作，页面就像被卡死了一样，如果要解决这个问题，可以用 web
38010编辑于 2022-09-08 - 来自专栏Super 前端
Web Workers RPC
因此，解决上述问题，通常有两种方案： 异步回调（asynchronous callbacks）：依赖第三方服务 开启多线程（web worker）：本文重点，浏览器提供了相应 web api 关于「JavaScript macrotask & microtask」相关内容，可阅读下述文章： JavaScript的工作原理：引擎，运行时和调用堆栈的概述 Event loop及macrotask & microtask Web Workers worker 的一个优势在于能够执行处理器密集型的运算而不会阻塞 UI 线程。 web workers 浏览器整体兼容性很好，为我们大面积使用奠定了基础~~~ 在一个 worker 中最主要的是不能直接影响父页面，包括操作父页面的节点以及使用页面中的对象。 environment for which worker represents the communication channel. – https://html.spec.whatwg.org/multipage/workers.html
98110编辑于 2022-10-05 - 来自专栏LET
Web Workers实践
JavaScript是单线程的，又是异步的，而最新的HTML5中，通过Web Workers可以在JS中支持多线程开发。这是几个意思？异步还是单线程，这怎么理解？Web Workers又是什么原理？ 而且，随着Web应用的不断发展 ，在JS端要求的计算量也越来越大，这种时候，Web Worker可以让JS在后台解决这些问题，而不必担心影响用户体验。 但这已经足够了，比如排序，或者zip压缩等操作，都可以放到Worker线程来运行，从而能够在Web端进行类似CS的很多应用。 摘自AlloyTeam团队《深入理解Web Worker》 main.js中，在创建woker线程后，立即调用了postMessage方法传递了数据，在worker线程还没创建完成时，main.js 在经过一轮消息来回后，继续通信时， 这个时候因为worker线程已经创建，所以消息会直接添加到WorkerRunLoop的消息队列中 ---摘自AlloyTeam团队《深入理解Web Worker》
1K40发布于 2018-06-20 - 来自专栏九彩拼盘的叨叨叨
Web Workers 介绍
Web Workers 是个啥 有时候，我们写的脚本需要执行一些耗时的大计算量的操作。在脚本执行过程中，浏览器会出现冻结用户界面的情况（用户对页面进行操作，但浏览器没有响应）。 这时候，就该 Web Workers 出场啦~ Web Workers 指的是可以让脚本文件在浏览器后台（独立线程）独立运行的技术。 Web Worker 的类型 Web Worker 分为 DedicatedWorker 和 SharedWorker。本文下面介绍的是 DedicatedWorker。 Workers worker.terminate(); 完整demo见这里。 Web Workers API 浏览器兼容性 支持的浏览器 IE 10+,Firefox,Chrome。更多见Can I Use。
45620发布于 2018-08-27 - 来自专栏大前端_Web
解析Web Workers
https://blog.csdn.net/wkyseo/article/details/77884572 详解Web Workres理念 Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法 worker，还有一些其它类型的worker： ServiceWorkers （服务worker）一般作为web应用程序、浏览器和网络（如果可用）之前的代理服务器。 Chrome Workers 是一种仅适用于firefox的worker。 如果您正在开发附加组件，希望在扩展程序中使用worker且有在你的worker中访问 js-ctypes 的权限，你可以使用Chrome Workers。详情请参阅ChromeWorker。 Audio Workers （音频worker）使得在web worker上下文中直接完成脚本化音频处理成为可能。
80120发布于 2018-09-27 - 来自专栏LET
Web Workers实践（2）
2008 年 W3C 制定出第一个 HTML5 草案中提出了工作线程（Web Worker）的概念，并且规范出 Web Worker 的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗 Web Worker 允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应。 Web Workers类型有哪些？ Web Workers可以干什么？ JavaScript是异步的单线程，通过时间片轮换模拟并发效果（可参考之前写的《Web Workers实践》）。 通过Workers技术，我们把数据的解压缩和解析的工作交给子线程来处理，减轻主线程的负担。如下，现在我们可以将Update放到Workers线程，主线程专注Render以及和用户的交互。 ? 创建多个Workers后的性能 未测试具体时间，但在真实应用中体验很不错 缺点 Workers下不支持DOM对象，不支持Mutex，并不是一种彻底的多线程方案。
1.1K90发布于 2018-06-20 - 来自专栏Web大前端
Web Workers与Service Workers：后台处理与离线缓存
Web Workers 和 Service Workers 是两种在Web开发中处理后台任务和离线缓存的重要技术。它们在工作原理和用途上有显著区别。 Web Workers：后台处理Web Workers 允许在浏览器后台线程中执行计算密集型任务，避免阻塞主线程（UI线程），从而提高页面的响应性。 Web Workers 和 Service Workers 提供了强大的后台处理和离线缓存能力，但正确使用它们需要对Web开发有深入理解。 集成 Web Workers 和 Service Workers在某些场景下，你可能需要结合使用 Web Workers 和 Service Workers。 例如，Service Workers 可以负责离线缓存，而 Web Workers 可以处理缓存中的数据。
1.2K10编辑于 2024-06-21 HTML5 Web Workers
HTML5 Web Workers 实例 下面的例子创建了一个简单的 web worker，在后台计数： 实例 计数: 开始 Worker 停止 Worker var w; function startWorker Workers ") { w=new Worker("demo_workers.js"); } 然后我们就可以从 web worker 发送和接收消息了。 Workers. Workers
19410编辑于 2025-12-16- 来自专栏centosDai
HTML5(四)——Web Workers
一、什么是Web Worker ? Web Worker 就是为了 javascript 创造多线程而生的，主线程创建 worker 子线程，将一些任务分配给后台运行，等到子线程完成计算任务，再把结果返回给主线程，好处是计算密集型或高延迟的任务被 Web Worker 子线程一旦创建成功，就会独立于其他脚本始终运行，不会被主线程上活动打断。这样有利于随时响应主线程的通信。 使用 Web Worker 注意点： 同源限制：分配给 Worker 线程运行的脚本，必须与主线程的脚本文件同源，否则存在跨域问题。 //主线程关闭 myWorker.terminate() //子线程关闭 self.close() //方法一 this.close() //方法二 三、同一个网页的Web Worker 通常情况下
66210发布于 2021-11-26 - 来自专栏centosDai
HTML5(四)——Web Workers
一、什么是Web Worker ? Web Worker 就是为了 javascript 创造多线程而生的，主线程创建 worker 子线程，将一些任务分配给后台运行，等到子线程完成计算任务，再把结果返回给主线程，好处是计算密集型或高延迟的任务被 Web Worker 子线程一旦创建成功，就会独立于其他脚本始终运行，不会被主线程上活动打断。这样有利于随时响应主线程的通信。 使用 Web Worker 注意点： 同源限制：分配给 Worker 线程运行的脚本，必须与主线程的脚本文件同源，否则存在跨域问题。 //主线程关闭 myWorker.terminate() //子线程关闭 self.close() //方法一 this.close() //方法二 三、同一个网页的Web Worker 通常情况下
73520发布于 2021-09-29 - 来自专栏call_me_R
JavaScript 中 Web Workers【完整指南】
JavaScript 中的 Web Workers 是什么？ JavaScript 中的 Web Worker 允许我们在不干扰用户界面的前提下，Web 内容在后台运行。 这就是 HTML5 中 Web Workers 发挥作用的地方。使用 Web Workers，我们可以将一些进程从主线程转移到 Web Worker 线程中。 Web Worker - 案例 HTML Web Workers 通常用来卸载任务。它们被用来卸载主线程的任务，以方便主线程可以立马执行其他任务。 它可以用于执行一些对 CPU 要求高的任务。 总之，当我们想执行某个任务而不希望用户界面在任务执行期间保持卡住时，我们可以使用 HTML Web Workers。 主线程可以创建无数个 Web Workers，直到用户系统资源被完全消耗。 4. Service Worker 和 Web Worker 的区别？
1K10编辑于 2023-11-28 - 来自专栏前端web技术
异步JS中的Web Workers
一、了解Web Workers 介绍 js 的 Workers 前, 先思考什么是异步javascript? 为什么需要异步javascript的存在? 因此 Workers 是不能访问 DOM（窗口、文档、页面元素等等）的. 2、Web Wokers 通过使用 Web Workers，Web 应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。 二、Dedicated Workers 通常所说的 Worker 是指Deicated Workers, 其接口是 Web Workers API 的一部分, 他可以由脚本创建后台任务, 在任务执行的过程中 但是 Web Workers API 提供了接口 WorkerGlobalScope 来访问一些Web API, 每个 WorkerGlobalScope 也都有自己的事件循环. 而 Web Workers 除了上面说的三种类型, 还包括音频 Workers、Chrome Workers 等等, 也都在特定的场景中非常有用.
2.3K20编辑于 2022-11-17 - 来自专栏前端精读评论
76.精读《谈谈 Web Workers》
1 引言 本周精读的文章是 speedy-introduction-to-web-workers，是一篇 Web Workers 快速入门的文章，借精读这篇文章的机会，谈谈对 Web Workers 的理解与运用 首先在 Web Workers 架构设计上就必须做成队列，因为调用 postMessage 时，对应的 Web Workers 不一定完成了初始化，所以浏览器底层必须管理一个队列，在 Web Workers 由于 Web Workers 运算被卡住时，除了销毁 Worker 没有别的办法，而销毁 Worker 的成本比较高，不能对每一个用户输入都销毁并新建 Web Workers，所以利用 Workers 4 总结 Web Workers 是拆解异步计算的好帮手，vscode 网页版也通过 Web Workers 异步完成代码提示和高亮，笔者有对比过，发现 Web Workers 性能提升非常明显。 管理好你的 Web Workers 消息队列，谨防同步计算让 Web Workers 失去响应，建立一个智能的消息队列，根据业务需求设计一个最好的队列消费模型吧！
81530编辑于 2022-03-14 - 来自专栏菜鸟小栈
你不知道的 Web Workers
：Web Workers 的限制与能力及主线程与 Web Workers 之间如何通信； Web Workers 的分类：Dedicated Worker、Shared Worker 和 Service Workers； Web Workers API：Worker 构造函数及如何观察 Dedicated Worker 等。 下面我们开始步入正题，为了让大家能够更好地理解和掌握 Web Workers，在正式介绍 Web Workers 之前，我们先来介绍一些与 Web Workers 相关的基础知识。 嘿嘿，当然是使用本文的主角 —— Web Workers。 六、参考资源 w3.org - workers MDN - Web_Workers_API web-workers-vs-service-workers-vs-worklets introduction-to-web-worker
1.8K10发布于 2020-07-10 - 来自专栏Super 前端
Web Workers RPC：Comlink 源码解析
上篇文章，有提及 Web Workers RPC 以解决浏览器不阻塞UI的问题，其中 comlink 是一把利器，本文就 comlink 的关键源码进行解析。
1K40编辑于 2022-11-02 - 来自专栏游戏杂谈
HTML5的Web Workers
详情请参数（下面的参考链接中都有例子说明）： https://developer.mozilla.org/En/Using_web_workers https://developer.mozilla.org /En/DOM/Worker http://www.whatwg.org/specs/web-workers/current-work/ 中文：WEB Workers提升WEB前端脚本JavaScript DOCTYPE html> <html> <head> <title>HTML5__Web Workers(仅支持FF3.5+、Opera 10.6+、Chrome 3+、Safari 4)</title html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="http://www.codediesel.com/demos/<em>workers</em> "支持" : "不支持")+"Web Worker"; 66: 67: getElem("clearBtn").onclick = function
1.2K10发布于 2018-11-15 - 来自专栏Web前端
JavaScript进阶 - Web Workers与Service Worker
在现代Web开发中，前端性能优化是一个永恒的话题。Web Workers 和 Service Worker 是两种强大的技术，它们允许开发者在后台执行耗时任务，从而提高用户体验。 Web Workers - 异步执行脚本Web Workers 允许在浏览器后台独立于主线程运行脚本，避免了长时间运行的脚本导致的页面冻结。它们适用于密集型计算任务，如图像处理、数据解析等。 它对于实现PWA（Progressive Web App）至关重要。常见问题与解决方法注册问题：Service Worker 必须在支持的环境中注册，且页面必须在HTTPS上运行才能使用其全部功能。 结论Web Workers 和 Service Worker 是现代Web开发中不可或缺的技术，它们能显著提升应用的性能和用户体验。 通过避免上述提到的常见问题，你可以更有效地利用这些工具，构建更加健壮和高效的Web应用程序。实践是掌握这些技术的关键，不断尝试和优化，你将能够充分发挥它们的潜力。
95410编辑于 2024-07-10 - 来自专栏大数据
JavaScript进阶 - Web Workers与Service Worker
在现代Web开发中，前端性能优化是一个永恒的话题。Web Workers 和 Service Worker 是两种强大的技术，它们允许开发者在后台执行耗时任务，从而提高用户体验。 Web Workers - 异步执行脚本 Web Workers 允许在浏览器后台独立于主线程运行脚本，避免了长时间运行的脚本导致的页面冻结。它们适用于密集型计算任务，如图像处理、数据解析等。 它对于实现PWA（Progressive Web App）至关重要。 结论 Web Workers 和 Service Worker 是现代Web开发中不可或缺的技术，它们能显著提升应用的性能和用户体验。 通过避免上述提到的常见问题，你可以更有效地利用这些工具，构建更加健壮和高效的Web应用程序。实践是掌握这些技术的关键，不断尝试和优化，你将能够充分发挥它们的潜力。
42810编辑于 2024-07-11 - 来自专栏PhpZendo
HTML 5 Web Workers 的基本信息
Web Worker 简介：为 JavaScript 引入线程技术 Web Worker 规范定义了在网络应用中生成背景脚本的 API。 Web Worker 的类型 值得注意的是，规范中介绍了两种 Web Worker：专用 Worker 和 共用 Worker。 用例 那么，哪种应用可以利用 Web Worker 呢？很遗憾，Web Worker 仍相对较新，且已有的示例/教程中大部分都会涉及素数的计算。 Worker 规范 来自 Mozilla 开发人员网络的 “使用 Web Worker” 来自 Dev.Opera 的“Web Worker 潮流！” 本文装载自Web Workers 的基本信息
1.6K10发布于 2018-09-17 - 来自专栏若城技术专栏
Web Workers 完全指南：从入门到实战
一、Web Workers 基础概念 1.1 什么是 Web Workers？ Web Workers 是 HTML5 提供的一项重要特性，它允许网页在主线程之外运行脚本，从而实现真正的多线程编程。 通过 Web Workers，我们可以将耗时的计算任务放在后台线程中执行，避免阻塞主线程，提升应用的响应性能。 1.2 为什么需要 Web Workers？ 在传统的 JavaScript 中，所有代码都运行在主线程上，这意味着： 耗时的计算会阻塞 UI 渲染 复杂的数据处理会导致页面卡顿 大量的 CPU 密集型任务会影响用户体验 1.3 Web Workers Workers 4.1 Vue 中使用 Web Workers 4.1.1 基本集成 A[Vue组件] -->|1. this.workers.has(id)) { if (this.workers.size >= this.maxWorkers) { const
1K11编辑于 2025-02-21
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号